<template>
  <Breadcrumbs
    v-show="mappingProps.visible"
    ref="refComponent"
    class="t-breadcrumbs"
    :class="{ 'no-auto-wrap': !mappingProps.autoWrap }"
    :style="{ 'max-width': mappingProps.maxWidth }"
    v-bind="{ ...attrs, ...mappingProps }"
    :tabIndex="-1"
  >
    <slot>
      <template
        v-if="mappingProps.itemsDataSourceType === 'dynamic' && inDesign"
      >
        <breadcrumbs-el
          v-for="(item, index) of [
            { label: '动态数据源', to: '/', href: '', icon: '' },
            { label: '动态数据源', to: '/', href: '', icon: '' },
          ]"
          :key="index"
          :class="'active'"
          :disabled="item.disabled ? item.disabled : undefined"
          :label="item.label"
          :tabIndex="
            !item.disabled &&
            (item[mappingProps.toField || 'to'] ||
              item[mappingProps.hrefField || 'href'] ||
              item['canClick'])
            ? mappingProps.tabIndex
            : -1
          "
        />
      </template>
      <template v-else>
        <!-- 采用在DOM中判断啊的形式。而非用 computed/methods/etc. 会导致设计时的页面无法实时更新 + 数据消失（重新进入/切换page才可能生效） -->
        <!-- ps: :href='undefiend'写法，用于使存在类属性失效（href，disabeld...） -->
        <!--
          1.组件中进行国际化配置 - 需要在 studio 中 点一下 ”静态数据源“配置弹窗 的确认按钮，才能触发生效；且自动翻译的词条有问题
          v-for="(item, index) of mappingProps.itemsDataSourceType === 'static'
            ? staticItemsComputed
            : mappingProps.listDataSource"

          2.常规方案，辰哥，春辉 在 studio 已经处理好了，只需要配置“静态数据源”的元数据即可
          v-for="(item, index) of mappingProps.itemsDataSourceType === 'static'
            ? mappingProps.staticItems
            : mappingProps.listDataSource"
          2024.11.07 还是需要自己写。。。所以改回 staticItemsComputed, 里面用到 接口返回的 国际化词条字段
        -->
        <breadcrumbs-el
          v-for="(item, index) of mappingProps.itemsDataSourceType === 'static'
            ? staticItemsComputed
            : mappingProps.listDataSource"
          :class="
            !item.disabled &&
            (item[mappingProps.toField || 'to'] ||
              item[mappingProps.hrefField || 'href'] ||
              item['canClick'])
              ? 'active'
              : ''
          "
          :key="index"
          :disabled="item.disabled ? item.disabled : undefined"
          :label="item[mappingProps.labelField || 'label']"
          :icon="item[mappingProps.iconField || 'icon'] || undefined"
          :to="
            !item[mappingProps.disabledField || 'disabled'] &&
            item[mappingProps.toField || 'to']
              ? item[mappingProps.toField || 'to']
              : undefined
          "
          :href="
            !item[[mappingProps.disabledField || 'disabled']] &&
            item[mappingProps.hrefField || 'href']
              ? item[mappingProps.hrefField || 'href']
              : undefined
          "
          @click-item="(a, b) => clickItem({ ...a, ...item }, b)"
          :tabIndex="
            !item.disabled &&
            (item[mappingProps.toField || 'to'] ||
              item[mappingProps.hrefField || 'href'] ||
              item['canClick'])
            ? mappingProps.tabIndex
            : -1
          "
        />
      </template>
    </slot>
    <template v-slot:separator>
      <slot name="separator">
        <Icon
          v-if="mappingProps.separatorType === 'icon'"
          class="standard-separator standard-separator-icon"
          :name="mappingProps.separatorIcon"
        ></Icon>
        <span v-else class="standard-separator">
          {{ mappingProps.separator }}
        </span>
      </slot>
    </template>
  </Breadcrumbs>
</template>

<script setup>
import Breadcrumbs from '@teld/q-components/Breadcrumbs';
// import Icon from '@teld/q-components/Icon';
import Icon from '../icon';
import BreadcrumbsEl from './BreadcrumbsEl';

import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps } from 't/common/utils';
import { ref, useAttrs, useSlots, computed } from 'vue';

const Funcs = window.Funcs || {
  GetTerms: (c, n) => n,
};
const refComponent = ref();
const emit = defineEmits(['click']); // 'clickItem', -> 我认为, 一个click足够(且直接覆盖掉原来的click)，不需要区分副breadcrumbs和breadcrumbs-el
const slots = useSlots();
const attrs = useAttrs();
const props = defineProps({
  ...commonProps,
  ...Breadcrumbs.props,
  gutter: {
    type: String,
    default() {
      return 'none';
    },
  },
  separatorType: {
    type: String,
    default() {
      return ''; // icon, string // 传 '' 相当于 'string'
    },
  },
  // separator // 已经默认有了
  separatorIcon: {
    type: String,
    default() {
      return '';
    },
  },
  itemsDataSourceType: {
    type: String,
    default() {
      return 'static'; // static, dynamic
    },
  },
  staticItems: {
    type: Array,
    default() {
      return [];
    },
  },
  listDataSource: {
    type: Array,
    default() {
      return [];
    },
  },
  maxWidth: {
    type: String,
    default() {
      return '100%';
    },
  },
  autoWrap: {
    type: Boolean,
    default() {
      return true;
    },
  },
  labelField: {
    type: String,
    default() {
      return '';
    },
  },
  toField: {
    type: String,
    default() {
      return '';
    },
  },
  hrefField: {
    type: String,
    default() {
      return '';
    },
  },
  iconField: {
    type: String,
    default() {
      return '';
    },
  },
  disabledField: {
    type: String,
    default() {
      return '';
    },
  },
  // 低代码传入的是 tabIndex，而非 tabindex, 就是为了覆盖前者
  tabIndex: {
    type: [String, Number],
    default() {
      return 0;
    },
  },
});
const [mappingProps, mappingExpose] = useMappingProps(props);
defineExpose(mappingExpose);
// 采用在DOM中判断啊的形式。而非用 computed/methods/etc. 这会导致设计时的页面无法实时更新 + 数据消失（重新进入/切换page才可能有）
//   const breadList = computed(() => {
//     const breadList =
//       mappingProps.itemsDataSourceType === 'static'
//         ? mappingProps.staticItems
//         : mappingProps.listDataSource;
//     return breadList;
//   });

const staticItemsComputed = computed(() => {
  return (mappingProps?.staticItems || []).map(v => ({
    ...v,
    label: Funcs.GetTerms(v.label == '首页' ? 'Schema.Controls.fasr_breadcrumbs.label1' : v.label == '第二级' ? 'Schema.Controls.fasr_breadcrumbs.label2' : v.label == '第三级' ? 'Schema.Controls.fasr_breadcrumbs.label3' : v.ValueInfo_label?.ReferenceExpr, v.label)
  }))
})

const clickItem = (...args) => {
  const [params, $event] = args;
  emit('click', ...args);
};
const propertyHasThenUse = (key, obj = {}) => {
  if (!obj[key]) delete obj[key];
  return obj;
};
const inDesign = ref(!!window['fas']?.inDesign);
</script>

<style lang="scss">
.t-breadcrumbs,
.q-breadcrumbs {
  // 视觉上微调，上下居中 -- studio 设计器中
  padding-top: 1px;
  [disabled] {
    color: rgba(1, 1, 1, 0.32); // 特来电规范 覆盖
    color: rgba(122, 1, 1, 0.32); // 特来电规范 覆盖
  }

  .q-breadcrumbs__el {
    // font-size: 14px; // 不用加，此处和特来电规范相同，本身就是14px；
    color: rgba(1, 1, 1, 0.32);
    &.active {
      color: rgba(1, 1, 1, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
    }
    &.active:hover {
      cursor: pointer; // studio设计器有bug，设计时面板看不到词效果，故而加上
      color: var(--q-primary); // 特来电规范 覆盖
    }
  }
  .q-breadcrumbs__el[disabled], .q-breadcrumbs__el.disabled {
    opacity: 1!important;
  }
  .q-gutter-sm > .q-breadcrumbs__separator > .standard-separator-icon {
    // 改变分隔符 图标 左右两边的间距 -- 根据UI规范
    margin-left: -4px;
    margin-right: -4px;
  }
  .standard-separator {
    color: rgba(1, 1, 1, 0.32);
  }
  .standard-separator-icon {
    // 我们的图标没有留白，标准的图标有留白，14px * 0.7 => 正好合适
    font-size: 14px;
    transform: scale(0.7);
    // 改变分隔符 图标 左右两边的间距 -- 根据UI规范
    margin-left: 4px;
    margin-right: 4px;
  }
}
// 可全局修改的样式
.t-breadcrumbs.no-auto-wrap {
  overflow-y: hidden;
}
.q-breadcrumbs.no-auto-wrap > .flex,
.t-breadcrumbs.no-auto-wrap > .flex {
  overflow-y: hidden;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.q-breadcrumbs.no-auto-wrap > .flex > .flex,
.t-breadcrumbs.no-auto-wrap > .flex > .flex {
  flex-shrink: 0;
}
// 针对 q-gutter-sm 的特殊处理 --  注释掉本段，保持原来的 8px
// scoped 时 + deep
// .t-breadcrumbs ::v-deep(.q-gutter-sm .q-breadcrumbs__separator) {
//   margin-top: 5px; // 原来是8px;
// }
// 非 scoped 时
// .t-breadcrumbs .q-gutter-sm .q-breadcrumbs__separator {
//   // margin-top: 5px; // 原来是8px;
// }
</style>
